<script setup lang="ts">
import { ref, watch, type Ref, watchEffect } from 'vue'
import { type typeCalss } from '@/apis/video'

const props = defineProps(['classList'])
const emits = defineEmits(['getParms'])
const classIndex = ref('')
let classList_: Ref<typeCalss[]> = ref([])

watch(
  () => props.classList,
  () => {
    if (props.classList) classList_.value = props.classList
    // classList_ = ref(props.classList.slice(2, props.classList.length))
  },
  {
    immediate: true
  }
)

const yearIndex = ref('')
const yearList = ['2023', '2022', '2021', '2020', '2019', '2018', '2017', '2016', '2015', '2014-2010', '更早']

const orderIndex = ref('')
const orderList = ['评分排序', '最新发布']

watchEffect(() => {
  let orderType = 0
  switch (orderIndex.value) {
    case '评分排序': {
      orderType = 1
      break
    }
    case '最新发布': {
      orderType = 2
      break
    }
    default:
      break
  }
  emits('getParms', {
    type_id: classIndex.value,
    orderType,
    year: yearIndex.value == '更早' ? 'old' : yearIndex.value
  })
})
</script>

<template>
  <div class="videolib">
    <div class="videolib-choseBox" v-if="classList_.length > 0">
      <div class="videolib-choseBox-item videolib-choseBox-itemTitle" :class="{ 'videolib-choseBox-itemIt': classIndex == '' }" @click="classIndex = ''">全部类型</div>
      <div class="videolib-choseBox-itemBox">
        <div class="videolib-choseBox-item" :class="{ 'videolib-choseBox-itemIt': classIndex == item.type_id }" @click="classIndex = item.type_id" v-for="item in classList_" :key="item.type_id">{{ item.type_name }}</div>
      </div>
    </div>
    <div class="videolib-choseBox">
      <div class="videolib-choseBox-item videolib-choseBox-itemTitle" :class="{ 'videolib-choseBox-itemIt': yearIndex == '' }" @click="yearIndex = ''">全部年份</div>
      <div class="videolib-choseBox-itemBox">
        <div class="videolib-choseBox-item" :class="{ 'videolib-choseBox-itemIt': yearIndex == year_ }" @click="yearIndex = year_" v-for="year_ in yearList" :key="year_">{{ year_ }}</div>
      </div>
    </div>
    <div class="videolib-choseBox">
      <div class="videolib-choseBox-item videolib-choseBox-itemTitle" :class="{ 'videolib-choseBox-itemIt': orderIndex == '' }" @click="orderIndex = ''">默认排序</div>
      <div class="videolib-choseBox-itemBox">
        <div class="videolib-choseBox-item" :class="{ 'videolib-choseBox-itemIt': orderIndex == order_ }" @click="orderIndex = order_" v-for="order_ in orderList" :key="order_">{{ order_ }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.videolib {
  width: 100%;
  font-size: 15px;

  &-choseBox {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;

    &-itemBox {
      display: flex;
      flex-wrap: wrap;
    }

    &-itemTitle {
      width: 80px;
      flex-shrink: 0;
    }

    &-item {
      color: rgb(161, 161, 161);
      padding-right: 20px;
      margin-bottom: 10px;
      cursor: pointer;
    }

    &-itemIt {
      color: rgb(0, 209, 209);
    }
  }
}
</style>
